<template>
  <div>
    <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible"
               :append-to-body="true" width="80%" :close-on-click-modal="false" :before-close="handleClose">
      <div v-for="(item,index) in historyList" :key="index" class="history_border">
        <el-row :gutter="20" class="history_title">
          <el-col :span="16">提交时间 : {{item.createTime}}</el-col>
          <el-col :span="8" v-if="userInfo.detail.tenantVariables['ENABLE_REQUEST_DETAIL_AUDIT'] == 'true'">{{(item.auditStatus == 0)?'等待审核':((item.auditStatus == 1)?'同意':'拒绝')}}</el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 2em">
          <el-col :span="16" style="display: flex">
            <div style="width: 80px;">需求内容 :</div>
            <el-input id="id-offer-componets-creativerequest-conmponents-request-edit-history-content"
                      :readonly="true" :rows="2" type="textarea" v-model="item.content">
            </el-input>
          </el-col>
          <el-col :span="8" style="display: flex"  v-if="item.auditStatus == 2">
            <div style="width: 80px;">拒绝描述 :</div>
            <el-input id="id-offer-componets-creativerequest-conmponents-request-edit-history-auditComment"
                      :readonly="true" :rows="2"  type="textarea" v-model="item.auditComment">
            </el-input>
          </el-col>
        </el-row>
        <el-row style="margin-top: 1em;padding-left: 80px" v-if="item.appendFileList.length > 0">
          <div style="width: 80px;">需求内容附件 :</div>
          <creative-upload ref="upload" mode="readonly" :init-file-list="getFileList(item)" :max="5" :data="item"></creative-upload>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {selectDetailHis} from "@/api/offer/creativerequest";
import creativeUpload from "/src/components/beetles-upload/creative_upload";
import {mapGetters} from "vuex";

export default {
  name: "request-history",
  components: {
    creativeUpload,
  },
  props: {
    dialogVisible: Boolean,
    closeHistory:Function,
    creativeRequestDetail: Object,
  },
  watch: {
    creativeRequestDetail: {
      deep: true,
      handler(value) {
        if (!value) {
          return;
        }
        this.init();
      }
    },
  },
  data() {
    return {
      historyList: [],
    }
  },
  computed: {
    ...mapGetters(["permission", "userInfo"]),
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.historyList = [].concat(this.creativeRequestDetail.creativeRequestDetailHisList);
      this.historyList.sort((a,b)=>{
        return b.editSeq - a.editSeq;
      });
      this.historyList.forEach((his)=>{
        his.appendFileList = [];
        if(his.appendFiles != null && his.appendFiles.startsWith('[')) {
          his.appendFileList = JSON.parse(his.appendFiles);
        }
      });
    },
    getFileList(creativeRequestDetail) {
      let fileList = [];
      if(creativeRequestDetail.appendFiles != null && creativeRequestDetail.appendFiles.startsWith('[')) {
        let appendFileList = JSON.parse(creativeRequestDetail.appendFiles);
        appendFileList.forEach((appendFile)=>{
          fileList.push({
            name: appendFile.filename,
            url: appendFile.fileUrl,
          })
        });
      }
      return fileList;
    },
    /**
     * 关闭弹窗
     */
    handleClose() {
      this.closeHistory();
    },
  }
}
</script>

<style scoped lang="scss">
.history_border {
  width: 80%;
  margin: 0 auto 1em;
  .history_title{
    border-bottom: 2px solid #00a2ff;
  }
}
</style>
